<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <!-- <el-col :span="24" class="mb20">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
        </el-col> -->
        <el-col :span="24" class="mb20">
          <!-- prop="year" -->
          <el-form-item label="年份">
            <el-input v-model="form.year" placeholder="请输入年份" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <!-- prop="education" -->
          <el-form-item label="学历">
            <el-select v-model="form.education" placeholder="请选择学历">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in degree2"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="最高学历" prop="highestDegree">
            <!-- <el-input v-model="form.highestDegree" placeholder="请输入最高学历" /> -->
            <el-select v-model="form.highestDegree" placeholder="请输入最高学历">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in degree" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="考生号" prop="candidateId">
            <el-input v-model="form.candidateId" placeholder="请输入考生号" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="考生身份" prop="examineIdentity">
            <el-input v-model="form.examineIdentity" placeholder="请输入考生身份" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="报考学校" prop="appliedSchool">
            <el-input v-model="form.appliedSchool" placeholder="请输入报考学校" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="报考专业" prop="appliedMajor">
            <el-input v-model="form.appliedMajor" placeholder="请输入报考专业" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="录取学校" prop="admittedSchool">
            <el-input v-model="form.admittedSchool" placeholder="请输入录取学校" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="录取专业" prop="admittedMajor">
            <el-input v-model="form.admittedMajor" placeholder="请输入录取专业" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24" class="mb20">
          <el-form-item label="考生号" prop="examineId">
            <el-input v-model="form.examineId" placeholder="请输入考生号" />
          </el-form-item>
        </el-col>
        
        <el-col :span="24" class="mb20">
          <el-form-item label="考生密码" prop="examinePassword">
            <el-input v-model="form.examinePassword" placeholder="请输入考生密码" />
          </el-form-item>
        </el-col> -->

        <el-col :span="24" class="mb20">
          <el-form-item label="添加学生">
            <el-row :gutter="24">
              <el-col :span="24" class="mb20">
                <div class="mb20">
                  <el-button type="primary" @click="showMode">+</el-button>
                </div>
              </el-col>
              <el-col :span="24" class="mb20">
                <div class="mb20 tags" v-if="selectUserList.length > 0">
                  <el-tag v-for="tag in selectUserList" :key="tag" size="large" :disable-transitions="false"
                    @close="handleCloseTag(tag)">
                    {{ tag.name }}
                  </el-tag>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
      </span>
    </template>
    <selectUser ref="selectUserRef" :ismultiple="false" @selectUserFun="selectUserFun">
    </selectUser>
  </el-dialog>
</template>

<script setup lang="ts" name="EducationDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj, validateExist } from '/@/api/admin/education'
import { rule } from '/@/utils/validate';
import selectUser from '../../../components/selectUser/index.vue';
const selectUserRef = ref()
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
const selectUserList = ref([])
// 定义字典
const { degree } = useDict('degree')
const degree2 = ref([
  {
    "label": "一年制中专",
    "value": "0"
  },
  {
    "label": "全日制大专",
    "value": "1"
  },
  {
    "label": "本科",
    "value": "2"
  },
  {
    "label": "无",
    "value": "3"
  }
])
console.log('degree', degree2)

// 提交表单数据
const form = reactive({
  id: '',
  name: '',
  phone: '',
  education: '',
  year: '',
  examineId: '',
  examineIdentity: '',
  examinePassword: '',
  highestDegree: ''
});

// 定义校验规则
const dataRules = ref({
  education: [{ required: true, message: '学历不能为空', trigger: 'blur' }],
  year: [{ required: true, message: '年份不能为空', trigger: 'blur' }],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取education信息
  if (id) {
    form.id = id
    getEducationData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => { });
  if (!valid) return false;
  if (!form.name) {
    useMessage().error('请选择学生');
    return false
  }
  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getEducationData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj({ id: id }).then((res: any) => {
    Object.assign(form, res.data[0])
    form.education = formatstatus(form.education)
    form.highestDegree = formatstatus(form.highestDegree)
    selectUserList.value = [
      {
        name: form.name
      }
    ]
    console.log('getObj', res.data[0]);
  }).finally(() => {
    loading.value = false
  })
};
const selectUserFun = (data) => {
  selectUserList.value = data
  form.name = data[0].name
  form.phone = data[0].phone
  console.log('selectUserFun', data);
}
const showMode = () => {
  console.log('showMode', selectUserRef.value);
  selectUserRef.value.showMode()
}
const formatstatus = (num) => {
  if (num || num == 0) {
    let num2 = num + ''
    return num2
  } else {
    return ''
  }
}

// 暴露变量
defineExpose({
  openDialog
});
</script>
